<template>
  <!-- 添加或修改人员社会关系对话框 -->
  <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="95px">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item label="身份证" prop="idno">
        <el-input v-model="form.idno" placeholder="请输入身份证" />
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-select
          v-model="form.gender"
          placeholder="请选择性别"
          style="width: 100%"
        >
          <el-option
            v-for="dict in dict.type.gender"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="出生日期" prop="birthday">
        <el-date-picker
          v-model="form.birthday"
          clearable
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择出生日期"
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item label="文化程度" prop="whcd">
        <el-select
          v-model="form.whcd"
          placeholder="请选择文化程度"
          style="width: 100%"
        >
          <el-option
            v-for="dict in dict.type.whcd"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="家庭地址" prop="jtdz">
        <el-input v-model="form.jtdz" placeholder="请输入家庭地址" />
      </el-form-item>
      <el-form-item label="单位与职业" prop="dwyzy">
        <el-input v-model="form.dwyzy" placeholder="请输入单位与职业" />
      </el-form-item>
      <el-form-item label="相互关系" prop="xhgx">
        <el-input v-model="form.xhgx" placeholder="请输入相互关系" />
      </el-form-item>
      <el-form-item label="联系电话" prop="lxdh">
        <el-input v-model="form.lxdh" placeholder="请输入联系电话" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button :loading="buttonLoading" type="primary" @click="submitForm"
        >确 定</el-button
      >
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getRelation, addRelation, updateRelation } from "@/api/user/relation";

export default {
  name: "Relation",
  dicts: ["gender", "whcd"],
  data() {
    return {
      // 按钮loading
      buttonLoading: false,

      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,

      // 表单参数
      form: {},
      // 表单校验
      rules: {
        name: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
        idno: [{ required: true, message: "身份证不能为空", trigger: "blur" }],
        gender: [{ required: true, message: "性别不能为空", trigger: "blur" }],
        birthday: [
          { required: true, message: "出生日期不能为空", trigger: "blur" },
        ],
        whcd: [
          { required: true, message: "文化程度不能为空", trigger: "blur" },
        ],
        jtdz: [
          { required: true, message: "家庭地址不能为空", trigger: "blur" },
        ],
        dwyzy: [
          { required: true, message: "单位与职业不能为空", trigger: "blur" },
        ],
        xhgx: [
          { required: true, message: "相互关系不能为空", trigger: "blur" },
        ],
        lxdh: [
          { required: true, message: "联系电话不能为空", trigger: "blur" },
        ],
      },
    };
  },

  methods: {
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        relationId: undefined,
        userId: undefined,
        name: undefined,
        idno: undefined,
        gender: undefined,
        birthday: undefined,
        whcd: undefined,
        jtdz: undefined,
        dwyzy: undefined,
        xhgx: undefined,
        lxdh: undefined,
        createBy: undefined,
        createTime: undefined,
        updateBy: undefined,
        updateTime: undefined,
      };
      this.resetForm("form");
    },

    openModal(userId, relationId) {
      this.reset();
      this.open = true;
      this.title = "添加人员社会关系";
      this.form.userId = userId;
      if (relationId) {
        this.title = "编辑人员社会关系";
        getRelation(relationId).then((res) => {
          this.form = res.data;
        });
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.buttonLoading = true;
          if (this.form.relationId != null) {
            updateRelation(this.form)
              .then((response) => {
                this.$modal.msgSuccess("修改成功");
                this.$emit("data-updated");
                this.open = false;
              })
              .finally(() => {
                this.buttonLoading = false;
              });
          } else {
            addRelation(this.form)
              .then((response) => {
                this.$modal.msgSuccess("新增成功");
                this.$emit("data-updated");
                this.open = false;
              })
              .finally(() => {
                this.buttonLoading = false;
              });
          }
        }
      });
    },
  },
};
</script>
